Vuetify 是一個基於 Vue 的 UI 框架，

類似於 Vuetify 的框架或函式庫有很多，例如：

• Element UI
• VueStrap
• iView

...等等。

更多 Vue.js Libraries，請看 21 Top Vue.js UI Libraries For Your App

個人選擇喜好

先強調一下，純粹個人喜好，可以不同意。
我用過的三個 vue 的 UI 框架排名：

1. Vuetify
2. Element UI
3. VueStrap

這個排序或許會跟很多人不同，但必須先說的事情是，
這個順序也是我對這三個框架熟悉的程度，和使用的心得。

Vuetify

只在自己 side project 使用過 Vuetify，
我認為 Vuetify 的 grid system 非常優秀，
讓我幾乎可以不用寫任何一行 CSS 就可以完成複雜的切版，
而過程只需要透過幾個核心元件並傳入 props。

第一次看官方文件的 layout 範例真的嚇到了，
可以完全專注在開發客製化樣式而不是大量的切版和微調，
而大量且足夠彈性的元件，真的節省了很多開發時間。

除大量可用元件外，文件也是個人認爲做的最棒的，
清楚明瞭列出該元件有哪些 props, event, slot 等等，
還有 7 國語系，雖然只看得懂中文和英文。

提供許多可以覆寫的全域變數、class 和設定，例如：

• breakpoints: 方便處理 RWD
• spacing:
  透過預先定義好的 class，例如：pa-1, ma-3, pt-0，
  代表 padding, margin, padding-top 的寬度，
  讓我們不必再刻意為了一個小間距想一個 class 名稱，
  更棒的是可以將切版的樣式與客製化樣式明確區分。
• text alignment：透過 class 對齊文字。
• typography: 透過 class 控制字體大小和粗細。
• display: 透過 class 決定在哪些設備寬度下，要或不要顯示某些區塊。
• color:
  透過 class 更改顏色和背景色，
  例如 classname：red, red--text, lighten-5, darken-2 等等，
  不用再為了顏色煩惱。

小結論：

Vuetify 和其他兩個相比，有個滿大的差異，
就是 Vuetify 像是一個 UI framework，
而 Element UI 和 VueStrap 算是 vue component 的 library。

而 Vuetify 其實還有個小缺點，但相信不久之後這個問題就不存在了，
那就是 Vuetify 沒辦法單獨引入元件，打包起來檔案比較大，
但 vuetify-loader 似乎已經釋出了，
雖然還沒用過，但距離 tree-shaking 應該不遠了。

Element UI

個人認為 Element UI，也是非常優秀的，
雖然不像是 Vuetify 有那麼多有的沒的東西，
但這樣反而乾乾淨淨，不會被一些根本用不到的功能污染環境，
如果只需要單純使用元件，推薦 Element UI。
Element UI 不只是 UI 美麗(個人很喜歡哈哈)，
更可以單獨引入需要的元件或是指令，
開發起來介面真的是非常優雅啊！
Element UI 也是依照 BEM 的規則開發樣式，
所以要覆寫樣式在大部分的情況下很容易。

再來，小小吐嘈一下：
不知道是不是自己程度不夠，還是需求太複雜，
用 Element UI 時，時常會需要刻意去覆寫樣式才有辦法達到想要的結果，
元件有很多 prop 是要傳入 custom-class 而無法直接給 class，
元件有許多樣式寫成 inline style，非常難覆寫
使得在開發時時常需要花很多時間去追蹤，
並針對 css 權重的部分特別處理，
layout 跟 grid system 的使用也不像 vuetify 那麼方便，
個人覺得，仍然需要寫很多 css。

VueStrap

是一個將 bootstrap 3 components 改寫成 vue 的版本的 library。
由於本人對 bootstrap 實在是不太熟，主要是聽到別人說不怎麼喜歡，
自己是在維護公司專案上使用，沒有花太多時間去研究，就不多加評論了。

VueStrap 同 Element UI 可以單獨引入元件，
也提供清楚的文檔，和許多彈性的元件可以使用。

小總結

我覺得三個真的各有優缺點，當然上面的評論的確個人喜好成分居多，也非常主觀，
因為自己還是最喜歡 Vuetify 和 Element UI，
尤其拜讀這些大神們寫的框架和元件庫的原始碼，
真的可以學到非常多技巧和細節，了解自己還有哪些不足的地方。
如果以上有任何不恰當的地方，還請留言告訴我。

安裝 Vuetify

簡單比較過三個框架或元件庫之後，來安裝 Vuetify 吧！

因為是使用 create-nuxt-app 建立的 Nuxt.js 應用。

之前文章中的範例都是已經安裝好 vuetify 了，
以下就做一些客製化的基本設定：

• plugins/vuetify/index.js

import Vue from 'vue'
import Vuetify from 'vuetify'

import theme from '@/vuetify.config.js'

Vue.use(Vuetify, {
  theme
})

• vuetify.config.js

註解掉的部分基本上可刪除，因為之後不會用到，這邊只是留著原本預設的部分。
將 vuetify 的 theme 拆成 ES module 的目的是為了下一篇，
要整合 vuetify 和 storybook 的樣式。

// import colors from 'vuetify/es5/util/colors'

export default {
    primary: '#41B883',
    // accent: colors.grey.darken3,
    // secondary: colors.amber.darken3,
    // info: colors.teal.lighten1,
    // warning: colors.amber.base,
    // error: colors.deepOrange.accent4,
    // success: colors.green.accent3,
    main: '#121212'
  }

• nuxt.config.js

plugins: [
  '@/plugins/vuetify'
]

程式碼放在以下 branch:

009-vuetify-config-theme

指令：

git clone -b 009-vuetify-config-theme --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install
npm run dev